<template>
	<view>
		<view class="picker">
			<view class="item">
				<picker id="nature" mode="selector" :range="attrList[0].children" range-key="cate_name" @change="getValue">
					<text>{{ nature }}</text>
					<uni-icons type="bottom" size="14"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<picker id="scale" mode="selector" :range="attrList[1].children" range-key="cate_name" @change="getValue">
					<text>{{ scale }}</text>
					<uni-icons type="bottom" size="14"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<picker id="service" mode="selector" :range="attrList[2].children" range-key="cate_name" @change="getValue">
					<text>{{ service }}</text>
					<uni-icons type="bottom" size="14"></uni-icons>
				</picker>
			</view>
			<view class="item">
				<picker id="location" mode="selector" :range="attrList[3].children" range-key="cate_name" @change="getValue">
					<text>{{ location }}</text>
					<uni-icons type="bottom" size="14"></uni-icons>
				</picker>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import bus from '@/utils/bus.js';
	const nature = ref('办学性质');
	const scale = ref('规模');
	const service = ref('服务');
	const location = ref('位置');
	const attr = [];
	const props = defineProps({
		attrList: {
			type: [Array],
			default: [
				{
					children:[]
				}
			]
		}
	})
	
	
	const isIndex = () => {
		var pages = getCurrentPages();
		let currentPage = pages[pages.length-1]['$page']['fullPath'];
		return currentPage == '/pages/index/index'
	}
	const joinAttr = (ary) => {
		let aary = [];
		ary.forEach(i => {
			if(i !== undefined){
				aary.push(i);
			}
		})
		let str = aary.join(',');
		return str
	}
	const getValue = (e) => {
		var nowId = e.target.id;
		var value = e.target.value;
		switch(nowId){
			case "nature": 
				nature.value = props.attrList[0].children[value].cate_name;
				attr[0] = (props.attrList[0].children[value].id);
				// console.log('办学性质:',JSON.parse(JSON.stringify(nature.value)));
				break;
			case "scale": 
				scale.value = props.attrList[1].children[value].cate_name;
				attr[1] = (props.attrList[1].children[value].id);
				// console.log('规模:',JSON.parse(JSON.stringify(scale.value)));
				break;
			case "service": 
				service.value = props.attrList[2].children[value].cate_name;
				attr[2] = (props.attrList[2].children[value].id);
				// console.log('服务:',JSON.parse(JSON.stringify(service.value)));
				break;
			case "location": 
				location.value = props.attrList[3].children[value].cate_name;
				attr[3] = (props.attrList[3].children[value].id);
				// console.log('位置:',JSON.parse(JSON.stringify(location.value)));
				break;
		}
		let attrStr = joinAttr(attr);
		console.log('attrStr',attrStr);
		if(isIndex()){
			// console.log('是首页');
			// uni.setStorageSync('ATTRSTR',attrStr);
			uni.navigateTo({
				url:`/pages/listDetail/list-detail?attrStr=${attrStr}`
			})
		}else{
			// console.log('不是首页');
			bus.emit('getNewAttr',attrStr);
		}
	}
	// const getStorageAttrStr = () => {
	// 	uni.getStorage({
	// 		key: 'ATTRSTR',
	// 		success: function (res) {
	// 			if(res.data.length !== 0){
	// 				getAttrName(res.data);
					
	// 			}else{
	// 				console.log('本地暂未获取到attrstr');
	// 				return
	// 			}
	// 		}
	// 	});
	// }
	// const getAttrName = (str) => {
	// 	console.log('当前str',str);
	// 	console.log('props',props);
	// 	let obj = JSON.parse(JSON.stringify(props));
	// 	console.log('obj',obj)
	// 	props.attrList.forEach((i,index) => {
	// 		console.log('执行1')
	// 		i.children.forEach((x,xIndex) => {
	// 			console.log('执行2')
	// 			if(str == x.id){
	// 				switch(index){
	// 					case 0: 
	// 						nature.value = x.cate_name; 
	// 						break;
	// 					case 1: 
	// 						scale.value = x.cate_name; 
	// 						break;
	// 					case 2: 
	// 						service.value = x.cate_name; 
	// 						break;
	// 					case 3: 
	// 						location.value = x.cate_name;
	// 						break;
	// 				}
	// 				console.log('当前nature值',nature.value);
	// 			}
	// 		})
	// 	})
	// }
	
	// getStorageAttrStr();
	
	bus.on('getAttrName',(obj) => {
		// console.log('事件bus下的attrStr',str);
		// console.log('props',obj);
		obj.ary.forEach((i,index) => {
			i.children.forEach((x,xIndex) => {
				if(obj.inx == x.id){
					// console.log('此时搜寻的列表x',x.cate_name)
					// console.log('此时搜寻到的index',index);
					switch(index){
						case 0: 
							nature.value = x.cate_name; 
							break;
						case 1: 
							scale.value = x.cate_name; 
							break;
						case 2: 
							service.value = x.cate_name; 
							break;
						case 3: 
							location.value = x.cate_name;
							break;
					}
					// console.log(nature,scale,service,location);
				}
			})
		})
	})
</script>

<style lang="scss" scoped>
	.picker{
		width: mp-sizing(345);
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: mp-sizing(20) mp-sizing(15);
		.item{
			display: flex;
			flex-flow: row;
			justify-content: center;
			align-items: center;
			text{
				font-size: mp-sizing(14);
			}
		}
	}
</style>